<!-- 作用：这是Word加件的用户界面，包含了加件的主要HTML结构和样式。它定义了加件的任务窗格内容，包括按钮、文本和通知横幅。 -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Word Add-In with Commands Sample</title>

    <!-- 引入jQuery库 -->
    <script src="Scripts/jquery-3.6.0.js" type="text/javascript"></script>
    <!-- 引入消息横幅脚本 -->
    <script src="Scripts/MessageBanner.js" type="text/javascript"></script>
    <!-- 引入Office.js库 -->
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>

    <!-- 引入本地Office.js库进行脱机调试 -->
    <!-- <script src="Scripts/Office/MicrosoftAjax.js" type="text/javascript"></script> -->
    <!-- 引入Office.js库
    <script src="Scripts/Office/1/office.js" type="text/javascript"></script> -->
    <!-- 引入Home.js脚本 -->
    <script src="Hom.js?v=1.0.0.3" type="text/javascript"></script>
    <!-- 引入Home.css样式 -->
    <link href="Home.css" rel="stylesheet" type="text/css" />
    <!-- 引入Button.css样式 -->
    <link href="../Content/Button.css" rel="stylesheet" type="text/css" />
    <!-- 引入MessageBanner.css样式 -->
    <link href="../Content/MessageBanner.css" rel="stylesheet" type="text/css" />

    <!-- 引入Office UI Fabric Core样式 -->
    <link rel="stylesheet" href="Content/fabric.min.css" />

    <!-- 引入Office UI Fabric Core样式进行脱机调试 -->
    <!--- link rel="stylesheet" href="Content/fabric.min.css" /> -->
</head>

<body class="ms-Fabric" dir="ltr">
    <div id="content-main">
        <div class="padding">
            <!-- 按钮组 -->
            <div class="button-row">
                <!-- 高亮按钮 -->
                <button class="unified-btn ms-fontColor-white" id="highlight-button" style="background-color: #667eea; border: none; border-radius: 5px; padding: 6px; cursor: pointer; display: inline-block; text-align: center; min-width: 80px; height: 32px; font-size: 12px; margin: 0 2px;">
                    <i class="ms-Icon ms-Icon--Highlight" style="margin-right: 4px;"></i>
                    <span id="button-text"></span>
                </button>

                <!-- 图片按钮 -->
                <button class="unified-btn ms-fontColor-white" id="button2" style="background-color: #667eea; border: none; border-radius: 5px; padding: 6px; cursor: pointer; display: inline-block; text-align: center; min-width: 80px; height: 32px; font-size: 12px; margin: 0 2px;">
                    <i class="ms-Icon ms-Icon--Photo2" style="margin-right: 4px;"></i>
                    <span id="button2-text"></span>
                </button>

                <!-- 隐藏文字按钮 -->
                <button class="unified-btn ms-fontColor-white" id="hide-text-button" style="background-color: #667eea; border: none; border-radius: 5px; padding: 6px; cursor: pointer; display: inline-block; text-align: center; min-width: 80px; height: 32px; font-size: 12px; margin: 0 2px;">
                    <i class="ms-Icon ms-Icon--Hide3" style="margin-right: 4px;"></i>
                    <span id="hide-text-label"></span>
                </button>
            </div>

        </div>
    </div>
    <!-- 在 Home.html 文件中添加一个新的 div 元素来显示图片 -->
    <div id="images-panel" style="display:none;"></div>

    <!-- 页脚 -->
    <div class="footer">
        <div class="ms-Grid ms-bgColor-themeSecondary">
            <div class="ms-Grid-row">
                <div class="ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg12">
                    <div class="ms-font-s ms-fontColor-white" style="padding: 8px 0; text-align: justify; font-family: 'Microsoft YaHei', '微软雅黑', sans-serif; font-weight: 300; letter-spacing: 1px;"> 主人，您好！✨</div>
                </div>
            </div>
        </div>
    </div>



    <!-- 通知横幅 -->
    <div class="MessageBanner" id="notification-popup">
        <div class="MessageBanner-content">
            <div class="MessageBanner-text">
                <div class="MessageBanner-clipper">
                    <!-- 通知标题 -->
                    <div class="ms-font-m-plus ms-fontWeight-semibold" id="notification-header"></div>
                    <!-- 通知内容 -->
                    <div class="ms-font-m ms-fontWeight-semilight" id="notification-body"></div>
                </div>
            </div>
            <button class="MessageBanner-expand" style="display:none"><i class="ms-Icon ms-Icon--chevronsDown"></i> </button>
            <div class="MessageBanner-action"></div>
        </div>
        <button class="MessageBanner-close"> <i class="ms-Icon ms-Icon--ChromeClose"></i> </button>
    </div>
</body>
</html>
